import 'package:card_topia/common_widget/my_refresh_header.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:card_topia/my_router.dart';
import 'package:card_topia/pages/profile_page/my_cards_page/my_card_detail_page.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

import 'my_card_item.dart';

///构建卡片页面

class BuildCardsPage extends StatefulWidget {
  const BuildCardsPage({super.key});

  @override
  State<BuildCardsPage> createState() => _BuildCardsPageState();
}

class _BuildCardsPageState extends State<BuildCardsPage>
    with AutomaticKeepAliveClientMixin {
  final _refreshController = RefreshController();
  final _scrollController = ScrollController();
  bool _hide = true;
  List<dynamic> _items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController.addListener(() {
      if(_scrollController.position.pixels>100.w){
        _hide = false;
      }else{
        _hide = true;
      }
      setState(() {

      });
    });
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _scrollController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          //卡片列表
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16.w),
            padding: EdgeInsets.only(top: 40.w),
            child: SmartRefresher(
              controller: _refreshController,
              header: CustomHeader(builder: (context,status)=>RefreshHeader(status: status,),),
              child: GridView.count(
                controller: _scrollController,
                crossAxisCount: 3,
                childAspectRatio: 9 / 18.5,
                crossAxisSpacing: 16.w,
                children: _items.map((e) => InkWell(
                    onTap: (){
                      // context.push(MyRouter.myCardDetailPage);
                      MyRouter.push(page: MyCardDetailPage());
                    },
                    child: MyCardItem())).toList(),
              ),
            ),
          ),
          //统计数量
          Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                margin: EdgeInsets.only(left: 16.w,right: 16.w,bottom: 8.w),
                height: 32.w,
                  child:
                  Row(
                    children: [
                      Text("共23412张",style: TextStyle(fontSize: 14.sp,fontFamily: harmony,color: textColor),),
                      const Spacer(),
                      Row(
                        children: [
                          Icon(IconsaxOutline.sort,size: 16.w,color: descColor,),
                          SizedBox(width: 4.w,),
                          Text("稀有度",style: TextStyle(fontSize: 12.sp,fontFamily: harmony,color: descColor),),
                        ],
                      ),
                      SizedBox(width: 16.w,),
                      Row(
                        children: [
                          Icon(IconsaxBold.sort,size: 16.w,color: themeColor,),
                          SizedBox(width: 4.w,),
                          Text("持有量",style: TextStyle(fontSize: 12.sp,fontFamily: harmony,color: themeColor),),
                        ],
                      ),
                    ],
                  ))),
          //滑动到顶部按钮
          AnimatedPositioned(
              duration: const Duration(milliseconds: 100),
              bottom: 50.w,
              right: _hide?-40.w:16.w,
              child: InkWell(
                onTap: () {
                  _scrollController.animateTo(0, duration: const Duration(milliseconds: 200), curve: Curves.easeInOut);
                },
                child: Container(
                    decoration: BoxDecoration(
                      color: themeColor,
                      borderRadius: BorderRadius.circular(50)
                    ),
                    width: 40.w,
                    height: 40.w,
                    child: const Icon(Icons.rocket_rounded,color: Colors.white,)),))
        ],
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}



